import { ref } from 'vue';

export const changeTheme = () => {
    const theme = ref(localStorage.getItem("theme"));
    const url = import.meta.env.MODE === "development" ? '/public' : ""
    if(!theme || theme.value == "dark") {
        document.getElementById('theme').setAttribute('href', `${url}/dark.css`)
        localStorage.setItem("theme", 'dark')
        theme.value = 'dark';
    } else {
        document.getElementById('theme').setAttribute('href', `${url}/light.css`)
        localStorage.setItem("theme", 'light')
        theme.value = 'light';
    }

    const clickThemeBtn = () => {
        const themeState = localStorage.getItem("theme");
        if(themeState == 'light') {
            document.getElementById('theme').setAttribute('href', `${url}/dark.css`)
            localStorage.setItem("theme", 'dark')
            theme.value = 'dark';
        } else {
            document.getElementById('theme').setAttribute('href', `${url}/light.css`)
            localStorage.setItem("theme", 'light')
            theme.value = 'light';
        }
    }

    return {
        theme,

        clickThemeBtn,
    }
}